
import styled from 'styled-components';
import React, { CSSProperties, useEffect, useState } from 'react';


import { ProjectCategoryTree, FlowProjectGrid, ProjectPanel, DigitalHumanConfigPage } from './components';
import { ProjectPage } from './project';
import { ProjectType } from '@/services/local';

export interface WorkspacesPageProps {
    style?: CSSProperties;
}

export const WorkspacesPage: React.FC<WorkspacesPageProps> = (props) => {

    const [identifier, setIdentifier] = useState<string | null>(null);

    const [projectType, setProjectType] = useState<ProjectType | null>(null);

    const [version, setVersion] = useState<number>(0);

    return (
        <Container style={props.style}>
            <ProjectCategoryTree
                style={{
                    width: '220px',
                    minWidth: '220px',
                    borderRight: '1px solid #DEDEDE',
                    backgroundColor: '#FFFFFF',
                }}
                onProjectSelected={async (identifier, projectType: ProjectType | null) => {
                    console.log(identifier, projectType);
                    setIdentifier(identifier);
                    setProjectType(projectType);
                }}
                version={version}
            ></ProjectCategoryTree>
            <Content>
                {
                    identifier && projectType === ProjectType.AppDev && <ProjectPage projectIdentifier={identifier}></ProjectPage>
                }
                {
                    identifier && projectType === ProjectType.DigitalHuman && <DigitalHumanConfigPage projectIdentifier={identifier}></DigitalHumanConfigPage>
                }
                {
                    !identifier && <Message>
                        请选择工程！
                    </Message>
                }
            </Content>
        </Container >
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
`;

const Content = styled.div`
    flex: 1;
    height: 100%;
    width: 100%;
`;

const Message = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:12px;
`;
